<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小组作业</title>
    <link rel="stylesheet" href="./js/swiper-bundle.min.js" />
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/课程列表.css">
      <!-- 导航/轮播 -->
      <link rel="stylesheet" href="./css/daohang.css" !impotant>
      <!-- 导航图标 -->
      <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
      <!-- 导航 -->
<header>
  <input type="checkbox" name="check" id="check">
<a href="https://gitee.com/lvlv666666/group-tasks.git"><img src="./img/LOGO.png" class="LOGO"></a>
<nav class="nav" id="navbar">
  <a href="../首页/首页.html">首页</a>
  <a href="../课程列表/课程列表.html">课程列表</a>
  <a href="../课程评价/课程评价.html">课程详情</a>
  <a href="../关于我们/关于我们.html">关于我们</a>
  <a href="../注册/注册登录页面.html" id="anniu1">注册</a>
</nav>
<div class="user-form-group">
    <label for="check">
        <i class='bx bx-menu menu'></i>
        <i class='bx bx-x close-menu'></i>
    </label>
</div>
</header>
      <!-- 课程列表 -->
      <br>
    <br>
    <div class="container">
        <div class="neirong"><a href="#page1">听力</a></div>
        <div class="neirong"><a href="#page1">口语</a></div>
        <div class="neirong"><a href="#page1">写作</a></div>
    </div>
    <br>
    <hr>
    <!-- 第二行 -->
    <div class="book">
        <div class="shuji"><a href="#page1">四级</a></div>
        <div class="shuji"><a href="#page1">六级</a></div>
        <div class="shuji"><a href="#page1">笔试</a></div>
        <div class="shuji"><a href="#page1">语法</a></div>
    </div>
    <br>
    <div class="box page active" id="page1"> 
        <!-- class="page active" -->
        <div class="box small" >
          <img src="./img/78878.png" alt="">
            <h2>大学生英语</h2>
            <br>
            <br>
            <br>
            <h5>这是一本大学英语书，英语的学习，从现在开始,从你我做起。
            </h5>
            <br>
            <br>
            <a href="../课程评价/课程评价.html">点击>></a>
        </div>
        <div class="box small">
          <img src="./img/774.png" alt="">
          <h2>大学生英语</h2>
          <br>
          <br>
          <br>
          <h5>这是一本大学英语书，英语的学习，从现在开始,从你我做起。
          </h5>
          <br>
          <br>
          <a href="../课程评价/课程评价.html">点击>></a>
        </div>
        <div class="box small">
                <img src="./img/222222222.png" alt="">
                <h2>大学生英语</h2>
                <br>
                <br>
                <br>
                <h5>这是一本大学英语书，英语的学习，从现在开始,从你我做起。
                </h5>
                <br>
                <br>
                <a href="../课程评价/课程评价.html">点击>></a>
        </div>
        <div class="box small">
          <img src="./img/78878.png" alt="">
          <h2>大学生英语</h2>
          <br>
          <br>
          <br>
          <h5>这是一本大学英语书，英语的学习，从现在开始,从你我做起。
          </h5>
          <br>
          <br>
          <a href="../课程评价/课程评价.html">点击>></a>
        </div>
        <div class="box small">
                <img src="./img/44.png" alt="">
                <h2>大学生英语</h2>
                <br>
                <br>
                <br>
                <h5>这是一本大学英语书，英语的学习，从现在开始,从你我做起。
                </h5>
                <br>
                <br>
                <a href="../课程评价/课程评价.html">点击>></a>
        </div>
        <div class="box small">
          <img src="./img/774.png" alt="">
          <h2>大学生英语</h2>
          <br>
          <br>
          <br>
          <h5>这是一本大学英语书，英语的学习，从现在开始,从你我做起。
          </h5>
          <br>
          <br>
          <a href="../课程评价/课程评价.html">点击>></a>
        </div>
    </div>
    <div class="box page" id="page2" >
        <!-- class="page" -->
        <div class="box small" >
          <img src="./img/774.png" alt="">
          <h2>大学生英语</h2>
          <br>
          <br>
          <br>
          <h5>这是一本大学英语书，英语的学习，从现在开始,从你我做起。
          </h5>
          <br>
          <br>
          <a href="../课程评价/课程评价.html">点击>></a>
        </div>
        <div class="box small">
          <img src="./img/78878.png" alt="">
          <h2>大学生英语</h2>
          <br>
          <br>
          <br>
          <h5>这是一本大学英语书，英语的学习，从现在开始,从你我做起。
          </h5>
          <br>
          <br>
          <a href="../课程评价/课程评价.html">点击>></a>
        </div>
        <div class="box small">
          <img src="./img/44.png" alt="">
          <h2>大学生英语</h2>
          <br>
          <br>
          <br>
          <h5>这是一本大学英语书，英语的学习，从现在开始,从你我做起。
          </h5>
          <br>
          <br>
          <a href="../课程评价/课程评价.html">点击>></a>
        </div>
        <div class="box small">
          <img src="./img/01.png" alt="">
          <h2>大学生英语</h2>
          <br>
          <br>
          <br>
          <h5>这是一本大学英语书，英语的学习，从现在开始,从你我做起。
          </h5>
          <br>
          <br>
          <a href="../课程评价/课程评价.html">点击>></a>
        </div>
    </div>
    <br>
    <br>
    <div class="btn">
        <button onclick="switchPage('page1')">&lt;</button> 
        <button onclick="switchPage('page1')">1</button> 
        <button onclick="switchPage('page2')">2</button>
        <button onclick="switchPage('page2')">&gt;</button>
     </div>   
   <br>
        <br>
         <!--foot  -->
     <div class="footer">  
      <div class="footer-left">  
          <div class="footer-logo">  
              <img src="./img/000.png" alt="网站LOGO" style="max-width: 60px;">  
          </div>  
          <p class="footer-text" class="lorem">我们是顺职2班第8小组。我们希望通过这个平台,
           为热爱英语的同学们提供一个交流、分享、成长的空间。
           </p>  
           <!-- 社交媒体 -->
           <div class="img1">
           <a href="#"><img src="./img/邮箱.png" alt=""></a>
           <a href="#"><img src="./img/仓库.png" alt=""></a>
          </div>
      </div>  
      <div class="footer-right">  
          <div class="footer-link" class="lorem">电子邮件：2514***@gta.edu.cn</div>  
          <div class="footer-link" class="lorem">电话:138******256</div>  
          <div class="footer-link" class="lorem">***********</div>  
      </div>  
      </div>  
      <script src="./js/script.js"></script>
        
</body>
<!-- 后页 -->
<script src="./js/swiper-bundle.min.js"></script>
<script>
  var swiper = new Swiper(".mySwiper", {
    slidesPerView: 1,
    spaceBetween: 30,
    loop: true,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
</script>
<!-- 换页 -->
<script>
    function switchPage(pageId) {
        // 移除所有页面的 'active' 类
        document.querySelectorAll('.page').forEach(function(page) {
            page.classList.remove('active');
        });
        
        // 为指定的页面添加 'active' 类以显示它
        document.getElementById(pageId).classList.add('active');
    }
    </script>
      
      <script>
        var swiper = new Swiper(".mySwiper", {
      slidesPerView: 1,
      spaceBetween: 10,
      autoplay: {
      stopOnLastSlide: true,
      },
      navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      breakpoints: {
        "@0.00": {
          slidesPerView: 1,
          spaceBetween: 10,
        },
        "@0.75": {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        "@1.00": {
          slidesPerView: 3,
          spaceBetween: 40,
        },
        "@1.50": {
          slidesPerView: 4,
          spaceBetween: 50,
        },
      },
    });
       
      </script>
</html>